<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="clockAll">
            <div id="one" class="one"> <input type="checkbox" class="yi" name="oneyi" value="1"> 一级菜单</div>
            <ul>
                <li>
                    <div id="two1" class="two1"><input type="checkbox" class="er1" name="twoer">二级菜单1</div>
                    <ul>
                        <li id="three1" class="three11"><input type="checkbox" class="three1">三级菜单1</li>
                        <li id="three2" class="three22"><input type="checkbox" class="three2">三级菜单2</li>
                        <li id="three3" class="three33"><input type="checkbox" class="three3">三级菜单3</li>
                    </ul>
                </li>
                <li>
                    <div id="two2" class="two2"><input type="checkbox" class="er2">二级菜单2</div>

                    <ul>
                        <li id="three11" class="three11er2"><input type="checkbox" class="three11er">三级菜单1</li>
                        <li id="three22" class="three22er2"><input type="checkbox" class="three22er">三级菜单2</li>
                        <li id="three33" class="three33er2"><input type="checkbox" class="three33er">三级菜单3</li>
                    </ul>
                </li>
                <li>
                    <div id="two3" class="two3"> <input type="checkbox" class="er3">二级菜单3 </div>
                    <ul>
                        <li id="three111" class="three11san"><input type="checkbox" class="three111">三级菜单1</li>
                        <li id="three222" class="three22san"><input type="checkbox" class="three222">三级菜单2</li>
                        <li id="three333" class="three33san"><input type="checkbox" class="three333">三级菜单3</li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
    <script>

        var clockAll = document.getElementById('clockAll')

        //获取一级菜单的id
        var one = document.getElementById("one")
        var oneInput = document.getElementsByClassName('yi')


        //获取二级菜单的id
        var two1 = document.getElementById("two1")
        var two2 = document.getElementById("two2")
        var two3 = document.getElementById("two3")
        var twoInput1 = document.getElementsByClassName('er1')
        var twoInput2 = document.getElementsByClassName('er2')
        var twoInput3 = document.getElementsByClassName('er3')

        //获取三级菜单的id
        var three1 = document.getElementById("three1")
        var three2 = document.getElementById("three2")
        var three3 = document.getElementById("three3")
        var threeInput1 = document.getElementsByClassName('three1')
        var threeInput2 = document.getElementsByClassName('three2')
        var threeInput3 = document.getElementsByClassName('three3')
        var threeInput11 = document.getElementsByClassName('three11er')
        var threeInput22 = document.getElementsByClassName('three22er')
        var threeInput33 = document.getElementsByClassName('three33er')
        var threeInput111 = document.getElementsByClassName('three111')
        var threeInput222 = document.getElementsByClassName('three222')
        var threeInput333 = document.getElementsByClassName('three333')

        clockAll.onclick = function (event) {
            event = event || window.event;
            switch (event.target.className) {
                case 'one'://一级菜单
                    clockOne();
                    break;
                case 'two1'://二级菜单1
                    clockTwo1();
                    break;
                case 'two2'://二级菜单2
                    clockTwo2();
                    break;
                case 'two3'://二级菜单3
                    clockTwo3();
                    break;
                case 'three11'://三级菜单1
                    clockThree1();
                    break;
                case 'three22'://三级菜单1
                    clockThree2();
                    break;
                case 'three33'://三级菜单1
                    clockThree3();
                    break;
                case 'three11er2'://三级菜单2
                    clockThree1er();
                    break;
                case 'three22er2'://三级菜单2
                    clockThree2er();
                    break; er
                case 'three33er2'://三级菜单2
                    clockThree3er();
                    break;
                case 'three11san'://三级菜单3
                    clockThree1san();
                    break;
                case 'three22san'://三级菜单3
                    clockThree2san();
                    break;
                case 'three33san'://三级菜单3
                    clockThree3san();
                    break;

            }
            // if (event.target.className == "one") {
            //     clockOne ()
            // }else if(event.target.className == "two1"){
            //     clockTwo()
            // }else if(event.target.className == "three11"){
            //     clockThree1()

            // }else if(event.target.className == "three22"){
            //     clockThree2()

            // }
            // else if(event.target.className == "three33"){
            //     clockThree3()

            // }
        }


        // // 一级菜单
        function clockOne() {
            for (let i = 0; i < oneInput.length; i++) {
                if (oneInput[i].checked == false) {
                    oneInput[i].checked = true
                    two1.style.display = "block"
                    two2.style.display = "block"
                    two3.style.display = "block"
                } else {
                    oneInput[i].checked = false
                    two1.style.display = "none"
                    two2.style.display = "none"
                    two3.style.display = "none"
                }
            }
        }
        //二级菜单
        function clockTwo1() {
            // for (let i = 0; i < twoInput1.length; i++) {
            //     if (twoInput1[i].checked == false) {
            //         twoInput1[i].checked = true
            //         three1.style.display = "block"
            //         three2.style.display = "block"
            //         three3.style.display = "block"
            //     } else {
            //         three1.style.display = "none"
            //         three2.style.display = "none"
            //         three3.style.display = "none"
            //         twoInput1[i].checked = false
            //     }
            // }
            twoFor(twoInput1, three1, three2, three3)
        }
        function clockTwo2() {
            twoFor(twoInput2, three11, three22, three33)
        }
        function clockTwo3() {
            twoFor(twoInput3, three111, three222, three333)
        }
        //二级菜单封装
        function twoFor(twoInput, threeA, threeB, threeC) {
            for (let i = 0; i < twoInput.length; i++) {
                if (twoInput[i].checked == false) {
                    twoInput[i].checked = true
                    threeA.style.display = "block"
                    threeB.style.display = "block"
                    threeC.style.display = "block"
                } else {
                    threeA.style.display = "none"
                    threeB.style.display = "none"
                    threeC.style.display = "none"
                    twoInput[i].checked = false
                }
            }
        }
        //三级菜单1
        function clockThree1() {
            threeFor(threeInput1)
            console.log();
        }
        function clockThree2() {
            threeFor(threeInput2)
        }
        function clockThree3() {
            threeFor(threeInput3)
        }
        //三级菜单2
        function clockThree1er() {
            console.log(threeInput11);
            threeFor(threeInput11)
        }
        function clockThree2er() {
            threeFor(threeInput22)
        }
        function clockThree3er() {
            threeFor(threeInput33)
        }
        //三级菜单3
        function clockThree1san() {
            threeFor(threeInput111)
        }
        function clockThree2san() {
            threeFor(threeInput222)
        }
        function clockThree3san() {
            threeFor(threeInput333)
        }

        //三级菜单通用封装
        function threeFor(threeInput) {
            for (let i = 0; i < threeInput.length; i++) {
                if (threeInput[i].checked == false) {
                    threeInput[i].checked = true
                } else {
                    threeInput[i].checked = false
                }
            }
        }

    </script>

</body>
<style>
    ul,
    li {
        list-style: none;
    }

    #two3 {
        display: none;
    }

    #two2 {
        display: none;
    }

    #two1 {
        display: none;
    }

    #three1 {
        display: none;
    }

    #three2 {
        display: none;
    }

    #three3 {
        display: none;
    }

    #three11 {
        display: none;
    }

    #three22 {
        display: none;
    }

    #three33 {
        display: none;
    }

    #three111 {
        display: none;
    }

    #three222 {
        display: none;
    }

    #three333 {
        display: none;
    }
</style>

</html>